<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侦听属性的变化</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>

    <!-- 

    -->

    <!-- 准备一个容器 -->
    <div id="app">
        <h1>{{msg}}</h1>
        数字：<input type='text' v-model="number" /> <br />
        数字ab：<input type='text' v-model="a.b" /> <br />
        数字ac：<input type='text' v-model="a.c" /> <br />
        数字adef：<input type='text' v-model="a.d.e.f" /> <br />
        数字（后期添加监视）：<input type='text' v-model="number2" /> <br />
        数字（简写方式监视）：<input type='text' v-model="number3" /> <br />
    </div>

    <script>

        const vm = new Vue({
            el: '#app',
            data: {
                msg: '计侦听属性的变化',
                number: 0,
                number2: 2,
                number3: 3,
                a: {
                    b: 1,
                    c: 2,
                    d: {
                        e: {
                            f: 3
                        }
                    }
                }
            },
            watch: {
                // 可以监视多个属性
                // 监视哪个属性，请把这个属性的名字拿过来即可
                // 可以监视Vue的原始属性
                number: {
                    //设置为true的时候，页面加载就会执行一次 （默认false）
                    immediate: true,
                    //这里有一个固定写死的方法，方法名必须叫做：handler
                    //handler方法什么时候调用呢？当监视的属性发生变化的时候，hander就会自动调取一次
                    //handler方法上有两个参数：第一个参数newVal，第二个参数是oldval
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal)

                        console.log(this) //当前的vm对象
                    }
                },
                // 如果监视的属性存在多级结构，则需要添加 单引号 ''
                'a.b': {
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal)
                    }
                },
                //深度监视
                a: {
                    //启用深度监视，默认是不开启深度监视的
                    //什么时候开启深度监视：当你需要监视一个具有多结构的属性，并且监视所有属性，需要启用深度监视
                    deep: true,
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal, "深度监视")
                    }
                },
                //注意：当只有handler回调函数的时候，可以启用简写形式
                number3(newVal, oldVal) {
                    console.log(newVal, oldVal, "简写形式")
                }
            },
            methods: {

            }
        })

        //如何后期添加监视？调用Vue相关的API即可
        //语法：vm.$watch('被监视的属性',{})
        vm.$watch('number2', {
            immediate: true,
            handler(newVal, oldVal) {
                console.log(newVal, oldVal, "后期监视")
            }
        })
        // 后期添加的简写形式，无法设置其他属性，只有handler的回调函数
        // vm.$watch('number2', function (newVal, oldVal) {
        //     console.log(newVal, oldVal, "后期监视")
        // })
    </script>


</body>


</html>